<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./js/index.js">
</head>
<body>
    <div class="content"> 
        <div class="login-wrapper">
            <div class="right-login-form">
                <div class="form-wrapper">
                    <h1>登录窗口</h1>
                    <div class="input-items">
                        <span class="input-tips">
                            用户名
                        </span>
                        <input type="text" name="unum" id="username" class="inputs" placeholder="请输入用户名">
                        <span class="msg"></span>
                    </div>
                    <div class="input-items">
                        <span class="input-tips">
                            密码
                        </span>
                        <input type="password" name="password" id="password" class="inputs" placeholder="请输入6~8密码">
                        <span class="msg"></span>
                    </div>
                    <button class="btn">登录</button>
                    <div class="siginup-tips">
                        <span><a href="./register.html">注册</a></span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
       window.onload=function () {
            var btn = document.querySelector(".btn");
            var usernameEle = document.querySelector("#username");
            var passwordEle = document.querySelector("#password")
            btn.onclick =function () {
                //获取用户名和密码 进行登录操作
                var username = usernameEle.value;
                var password = passwordEle.value;
                if(username!=="" && password!==""){
                    //发ajax请求!!! 进行登录操作
                    var xhr = new XMLHttpRequest();
                    xhr.addEventListener("load", function () {
                        //请求完成
                        var res = JSON.parse(this.responseText)
                        if(res.data === "error"){
                            //登录操作失败 提醒一下用户
                            alert(res.message)
                        }else{
                            // 登录操作得成功!!!! 才能跳转博客页; 持久化存储token
                            var token = res.data;
                            //前端将token存到localStorage中
                            localStorage.setItem("token",token);
                            window.location.href = "./blog.html";
                        }
                    });
                    xhr.open("POST", "http://127.0.0.1:8080/api/users/login");
                    xhr.send(JSON.stringify({
                        username:username,
                        password:password
                    }));

                }
            }
       }
    </script>
</body>
</html>